<template>
  <div id="add-blog">
    <h2>修改博客</h2>
    <h3 v-if="submited">博客修改成功</h3>
    <form v-if="!submited">
      <label>博客标题</label>
      <input type="text"  v-model="blog.title">
      <label>博客内容</label>
      <input type="text" v-model="blog.content"/>

      <div id="checkboxs">
        <label>Java</label>
        <input type="checkbox" v-if="blog.categories=='Java'" value="Java" v-model="blog.categories"/>
        <input type="checkbox" v-else="blog.categories!='Java'" value="Java" v-model="blogs.categories"/>
        <label>C++</label>
        <input type="checkbox"  value="C++" v-if="blog.categories=='C++'" v-model="blog.categories"/>
        <input type="checkbox"  value="C++" v-else="blog.categories!='C++'" v-model="blogs.categories"/>
        <label>Vue.js</label>
        <input type="checkbox"  value="Vue.js" v-if="blog.categories=='Vue.js'" v-model="blog.categories"/>
        <input type="checkbox"  value="Vue.js" v-else="blog.categories!='Vue.js'" v-model="blogs.categories"/>
        <label>Python</label>
        <input type="checkbox"  value="Python" v-if="blog.categories=='Python'" v-model="blog.categories"/>
        <input type="checkbox"  value="Python" v-else="blog.categories=='Python'" v-model="blogs.categories"/>
        <label>语文</label>
        <input type="checkbox"  value="语文" v-if="blog.categories=='语文'" v-model="blog.categories"/>
        <input type="checkbox"  value="语文" v-else="blog.categories=='语文'" v-model="blogs.categories"/>
      </div>

      <label>作者</label>
      <select v-model="blog.author">
        <option v-for="a in authors" >{{a}}</option>
      </select>
      <button v-on:click.prevent="updateBlog">Update Blog</button>
    </form>
    <hr />
    <div>

      博客标题:{{blog.title}}   <p />
      博客内容:{{blog.content}}   <p />
      分类 :
      <span v-for="c in blog.categories" >{{c}}</span><br><br>
      <p v-for="d in blogs.categories" v-if="blogs.categories!=null">{{d}}</p>
      作者 :{{blog.author}}
    </div>
  </div>
</template>

<script>
    export default {
        name: "UpdateBlog",
      data() {
        return {
          authors: ["jack", "hanmeimei", "李四", "wangwu"],
          blog: {
            id:this.$route.params.id,
            title: "",
            content: "",
            categories: [],
            author: ""
          },
          submited: false,
          blogs:{
            id:this.$route.params.id,
            title: "",
            content: "",
            categories: [],
            author: ""
          },

        }
      },
      created:function(){
          alert(this.blog.id);
        this.axios.get("/api/blog/single?id="+this.blog.id)
          .then((data)=>{
            return this.blog = data.data;
          })
      },
      methods:{
        updateBlog:function () {
          this.axios.post("/api/blog/update/",{
            id:this.blog.id,
            title:this.blog.title,
            content:this.blog.content,
            categories:this.blogs.categories.join(","),
            author:this.blog.author
          })
            .then((data)=>{
              console.log(data);
              this.submited = true;
            })
        }
      }
    }
</script>

<style scoped>
  #add-blog * {
    box-sizing: border-box;
  }
  #add-blog {
    margin: 20px auto;
    max-width: 800px;
    padding: 20px;
  }
  label {
    display: block;
    margin: 20px 0 10px;
  }

  input[type=text],textarea,select {
    display: block;
    width: 100%;
    padding: 8px;
  }

  #checkboxs label {
    display: inline-block;
    margin-top: 5px;
  }
  #checkboxs input {
    display: inline-block;
    margin-right: 10px;
  }

  textarea {
    height: 100px;
  }

  button {
    display: block;
    margin: 20px 0;
    background-color: crimson;
    border: 0;
    cursor: pointer;
    padding: 14px ;
    border-radius: 4px;
    font-size: 18px ;
  }

  #preview {
    border:1px solid #ccc;
    padding: 15px;
  }
</style>
